<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>尚品汇 我的购物车</title>
    <link rel="icon" href="/img/favicon.ico">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-cart.css" />
    <div th:include="common/head :: head"></div>
</head>

<body>
<!--head-->
<!-- 头部栏位 -->
<!--页面顶部-->
<div th:include="common/header :: header"></div>

<div class="cart py-container" id="item">
    <div class="seckill_dev" v-if="show == 1">
        排队中...
    </div>
    <div class="seckill_dev" v-if="show == 2">
        {{message}}
    </div>
    <div class="seckill_dev" v-if="show == 3">
        抢购成功&nbsp;&nbsp;

        <a href="/seckill/trade.html" target="_blank">去下单</a>
    </div>
    <div class="seckill_dev" v-if="show == 4">
        抢购成功&nbsp;&nbsp;

        <a href="/myOrder.html" target="_blank">我的订单</a>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>尚品汇E卡</li>
                            <li>尚品汇通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="./img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们<span class="space"></span></li>
                    <li>联系我们<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>商家入驻<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们</li>
                </ul>
                <p>地址：北京市昌平区宏福科技园综合楼6层</p>
                <p>京ICP备19006430号</p>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<script src="/js/api/seckill.js"></script>
<script th:inline="javascript">
    var item = new Vue({
        el: '#item',

        data: {
            skuId: [[${skuId}]],
            skuIdStr: [[${skuIdStr}]],
            data: {},
            show: 1,
            code: 211,
            message: '',
            isCheckOrder: false
        },

        mounted() {
            const timer = setInterval(() => {
                if(this.code != 211) {
                    clearInterval(timer);
                }
                this.checkOrder()
            }, 3000);
            // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
            this.$once('hook:beforeDestroy', () => {
                clearInterval(timer);
            })
        },

        created() {
            this.saveOrder();
        },

        methods: {
            saveOrder() { //开始抢购秒杀商品   再判断下单码
                seckill.seckillOrder(this.skuId, this.skuIdStr).then(response => {
                    //console.log(JSON.stringify(response))
                    if(response.data.code == 200) {
                        //本页面第二个请求  查询抢购结果的开关   默认是关闭的
                        this.isCheckOrder = true //将开关打开
                    } else {
                        this.show = 2
                        this.message = response.data.message
                    }

                })
            },

            //3秒执行一次下面的方法
            checkOrder() {
                //1、有开关
                if(!this.isCheckOrder) return
                //2、查询抢购结果
                seckill.checkOrder(this.skuId).then(response => {
                    this.data = response.data.data
                    this.code = response.data.code
                    console.log(JSON.stringify(this.data))
                    //排队中
                    if(response.data.code == 211) {
                        this.show = 1
                    } else {
                        //秒杀成功
                        if(response.data.code == 215) {
                            this.show = 3
                            this.message = response.data.message
                        } else {
                            if(response.data.code == 218) {
                                this.show = 4
                                this.message = response.data.message
                            } else {
                                this.show = 2
                                this.message = response.data.message
                            }
                        }
                    }
                })
            }
        }
    })
</script>
</body>
</html>
<style>
    .seckill_dev {
        background-color: #fff;
        padding: 44px 30px;
        box-shadow: 0 6px 32px rgba(0, 0, 0, .13);
        margin: 50px auto ;
        font-size: 18px;
        text-align: center;
    }
</style>
